<template>
  <div class="dashboard-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>{{ name }}百度网盘</span>
        <div v-show="flag" style="float: right">
          <span>大小：</span><i>{{ size }}</i>
          <el-button
            v-show="sizes < 1.2"
            type="primary"
            style="margin-left: 30px"
            @click="dowload"
            >下载</el-button
          >
        </div>
      </div>
      <el-empty v-show="folders.length <= 0" description="暂无数据" />
      <el-row :gutter="20" @click.native="yyds">
        <el-col
          v-for="(folder, index) in folders"
          :key="folder.fs_id"
          :span="4"
        >
          <el-card
            v-if="folder.isdir == 0 && folder.category == 3"
            :class="{ active: activeIndex === index }"
            class="ll-card"
            shadow="hover"
            @click.native.stop="setActive(index)"
          >
            <div class="folder-icon">
              <el-image :src="folder.thumbs.icon" fit="contain" />
            </div>
            <div class="folder-name">{{ folder.server_filename }}</div>
          </el-card>
          <el-card
            v-else
            class="ll-card"
            :class="{ active: activeIndex === index }"
            @click.native.stop="setActive(index)"
          >
            <div class="folder-icon">
              <i class="el-icon-folder" />
            </div>
            <div class="folder-name">{{ folder.server_filename }}</div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getCollect, download } from "@/api/baid";

export default {
  name: "Dashboard",
  computed: {
    ...mapGetters(["name", "bd_token"]),
  },
  data() {
    return {
      flag: false,
      size: "",
      sizes: null,
      folders: [],
      activeIndex: null,
      // 下载链接
      dow: null,
      flname: null,
    };
  },
  created() {
    //this.$store.state.user.userInfo.bd_token

    this.getCollect("/").then((res) => {
      this.folders = res.list;
    });
  },
  methods: {
    // 下载
    dowload() {
      const a = document.createElement("a");
      const url = this.RemoveDomainFromUrl(this.dow);
      console.log("截取前地址：" + this.dow);
      console.log("截取后地址:" + url);
      // /dow 反向代理前缀
      a.href = "/dow" + url + "&access_token=" + this.bd_token;

      a.style.display = "none";
      document.body.appendChild(a);
      a.click();
      a.remove();
    },
    // 拆分url
    RemoveDomainFromUrl(url) {
      const parseUrl = new URL(url);
      return parseUrl.pathname + parseUrl.search + parseUrl.hash;
    },
    // 查询
    async getCollect(getName) {
      return await getCollect(getName);
    },
    async download(fsids) {
      return await download(fsids);
    },
    // setActive 事件处理
    setActive(index) {
      console.log(85, index);
      this.activeIndex = index;
      if (this.folders[index].isdir !== 1) {
        this.flag = true;
        this.size = this.bytesToMB(this.folders[index].size) + "MB";
        this.sizes = this.bytesToMB(this.folders[index].size);
        if (this.sizes <= 1.2) {
          // 下载
          this.download({ fsides: this.folders[index].fs_id }).then((res) => {
            this.dow = res.list[0].dlink;
            this.flname = res.list[0].filename;
          });
        }
      } else {
        this.flag = false;
      }
    },
    bytesToMB(bytes) {
      const mb = bytes / (1024 * 1024);
      return mb.toFixed(2);
    },
    // 点击空白处取消选中
    yyds() {
      this.activeIndex = null;
      this.flag = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.active {
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
}
.el-row {
  max-height: 79vh; /* 设置卡片的最大高度 */
  overflow-y: auto; /* 启用垂直滚动 */
}
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.folder-icon {
  font-size: 48px;
  text-align: center;
  margin-bottom: 10px;
  color: orange;
}

.folder-name {
  text-align: center;
  font-size: 14px;
  height: 16px;
  padding: 0 10px;
  width: 100%;
  flex-flow: wrap;
  overflow: hidden;
}

.ll-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px;
  box-sizing: border-box;
  margin: 10px;
  cursor: pointer;
  height: 140px;
}
</style>
